<template>
    <div class="station">
        <div class="top">
            <div>
                <span>{{fatherDatas.fromTime}}</span><span>---</span><span>{{fatherDatas.toTime}}</span>
            </div>
            <div>
                <span>{{fatherDatas.times}}</span>
            </div>
        </div>
        <div class="list">
            <div v-for="(item,index) in fatherDatas.list" :key="index">
                <img src="../../../static/traffic/img/stationCon1.png" v-if="item.type == 1">
                <img src="../../../static/traffic/img/stationCon2.png" v-if="item.type == 2">
                <img src="../../../static/traffic/img/stationCon3.png" v-if="item.type == 3">
                <span :class="{ yellowColor : item.type == 2 , redColor : item.type == 3}">{{item.name}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        data() {
            return {

            }
        },
        mounted() {
            console.log(this.fatherDatas);
        },
        methods: {

        },
        props:{
            fatherDatas: { // 父组件传来的
                type: Object
            },
        }
    }
</script>

<style scoped lang="scss">
    .station{
        padding: 0 20px;
        color: #97D0F4;
        .top{
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .list{
            display: flex;
            justify-content: space-between;
            div{
                width: 13px;
                line-height: 14px;
                font-size: 14px;
                img{
                    margin-bottom: 6px;
                }
                .redColor{
                    color: #FFAD95;
                }
                .yellowColor{
                    color: #EEFD7B;
                }
            }
        }
    }
</style>